<template>
  <d2-container>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <div class="d2-breadcrumb">
        <el-breadcrumb-item>房源管理</el-breadcrumb-item>
        <el-breadcrumb-item>新增房源</el-breadcrumb-item>
      </div>
    </el-breadcrumb>
    <el-form
      label-width="100px"
      :model="query"
      :rules="rules"
      ref="add"
      label-position="top"
    >
      <!-- card 1 -->
      <el-card>
        <div class="title-box">基本信息</div>
        <!-- row 1 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="房源名称" prop="name">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.name"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="房源类型">
              <el-select v-model="query.type" placeholder="请选择" style="width: 80%">
                <el-option label="园区" :value="1"></el-option>
                <el-option label="写字楼" :value="2"></el-option>
                <el-option label="个人" :value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单价/天" prop="univalenceDay">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.univalenceDay"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- row 2 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="地址(市)" prop="city">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.city"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="地址(县/区)" prop="county">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.county"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="详细地址" prop="address">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.address"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- row 3 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="楼层" prop="floor">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.floor"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="注册类型" prop="register">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.register"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="使用率" prop="utilizationRate">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.utilizationRate"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- row 4 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="工位" prop="workCount">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.workCount"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="装修情况" prop="fitmentCase">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.fitmentCase"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="支付类型" prop="paymentMethod">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.paymentMethod"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- row 5 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="租期" prop="leaseTerm">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.leaseTerm"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="房源标签" prop="housingLabel">
              <el-input
                placeholder="请输入，多标签请用;隔开"
                type="text"
                v-model.trim="query.housingLabel"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="房源亮点" prop="highlights">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.highlights"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- row 6 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="封面标签" prop="coverLabel">
              <el-input
                placeholder="请输入，多标签请用;隔开"
                type="text"
                v-model.trim="query.coverLabel"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="视频路径" prop="videoPath">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.videoPath"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="租赁封面图片" prop="indexImage">
              <img-upload
                tip="建议:图片小于1M"
                v-model="query._indexImage"
                :limit="1"
                listType="picture-card"
              ></img-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <!-- card 2 -->
      <el-card style="margin: 20px 0">
        <div class="title-box">经纪人信息</div>
        <!-- row 1 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="经纪人名称" prop="agentName">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.agentName"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="经纪人联系方式" prop="agentPhone">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.agentPhone"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <!-- card 4-->
      <el-card style="margin: 20px 0">
        <div class="title-box">房产信息</div>
        <!-- row 1 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="房东id" prop="housingMasterId">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.housingMasterId"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属园区" prop="gardenName">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.gardenName"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="房屋面积">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.area"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- row 3 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="朝向" prop="orientation">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.orientation"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="层高" prop="storeyHeight">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.storeyHeight"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="房产格局" prop="pattern">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.pattern"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="房屋类型">
              <el-select v-model="query.houseType" placeholder="请选择" style="width: 80%">
                <el-option label="园区" :value="1"></el-option>
                <el-option label="写字楼" :value="2"></el-option>
                <el-option label="商铺" :value="3"></el-option>
                <el-option label="厂房" :value="4"></el-option>
                <el-option label="仓库" :value="5"></el-option>
                <el-option label="土地" :value="6"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="房产证" prop="propertyCard">
              <img-upload
                tip="建议:图片小于1M"
                v-model="query._propertyCard"
                :limit="1"
                listType="picture-card"
              ></img-upload>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item>
          <el-button type="primary" @click="add">保存</el-button>
        </el-form-item>
      </el-card>
    </el-form>
  </d2-container>
</template>
<script>
export default {
  data() {
    return {
      id: this.$route.params.id,
      query: {},
      rules: {
        housingMasterId: [
          { required: true, message: "内容不能为空", trigger: "blur" },
        ],
        name: [{ required: true, message: "内容不能为空", trigger: "blur" }],
      },
    };
  },
  methods: {
    add() {
      this.$refs["add"].validate((valid) => {
        if (valid) {
          let params = {
            ...this.query,
          };
          if (this.query._indexImage && this.query._indexImage.length > 0) {
            params.indexImage = this.query._indexImage[0].url;
          }
          if (this.query._propertyCard && this.query._propertyCard.length > 0) {
            params.propertyCard = this.query._propertyCard[0].url;
          }
          console.log("提交内容：", params);
          this.$axios.post("/wxHousingRent/add", params).then((result) => {
            if (result.data == 1) {
              this.$message.success("操作成功");
              this.$router.push("/housing");
              this.$refs["add"].resetFields();
            } else {
              this.$message.error(result.data.msg);
            }
          });
        } else {
          return false;
        }
      });
    },
     getInfo() {
      this.$axios
        .post("/wxHousingRent/getInfo", { id: this.id })
        .then((result) => {
          if (result) {
            this.query = {
              ...result.data,
              ...this.query,
              _indexImage: [{ url: result.data.indexImage }],
              _propertyCard: [{ url: result.data.propertyCard }],
            };
          } else {
            this.$message.error(result.data.msg);
          }
        });
    },
    mounted() {
    this.getInfo();
  },
  },
};
</script>
<style scoped lang="scss">
.item-box {
  position: relative;
  width: 30%;
  .item-delete {
    position: absolute;
    right: 80px;
    top: -45px;
  }
}
.card-box {
  display: flex;
  flex-wrap: wrap;
}
</style>